<template>
  <!-- <div v-if="!isOpend" class="drawer-container" > -->
    <!-- <div style="width: 100%;height: 100%;"> -->
    <el-drawer class="MYclass" v-model="isOpend" title="I am the title" :destroy-on-close="true" direction="ltr" :modal="true" :size="!isOpend2?'15%':'27%'" :with-header="false" >
      <FirstMenu ></FirstMenu>
    <SecondMenu :route="item"> </SecondMenu>
    
  </el-drawer>
<!-- </div> -->
</template>

<script setup>
import FirstMenu from './FirstMenu.vue'
import SecondMenu from './SecondMenu.vue'
import { useStore } from 'vuex';
import { computed, ref } from 'vue'
const store = useStore();
const routes = computed(() => {
    return store.getters['routes/api2Routes'];
  });
const isOpend = computed(() => {
    return store.getters['routes/isOpend'];
  });
  const isOpend2 = computed(() => {
    return store.getters['routes/isOpend2'];
  });
</script>

<style lang="scss" scoped>

.drawer-container {
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 1px #dddddd solid;
  width: 100%;
  height: 100%;
  /* background-color: rgba($color: #000000, $alpha: 0.4); */ 
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}
:deep(.el-drawer__body){
    padding: 0px !important;
    border-right: 1px rgb(221, 221, 221) solid !important;
}
.MYclass{
  &:deep(.el-drawer__body){
    padding: 0px !important;
  }
}
</style>
